<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Three.js Layer - Google Maps API</title>
  <style>
    html,
    body,
    #map-div {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script src="data.js"></script>
  <script src="styles.js"></script>
  <script src="../lib/detector.js"></script>
  <script src="../lib/dat.gui.js"></script>
  <script src="../lib/three.js"></script>
  <script src="../threejs-layer.js"></script>

  <script>
    function init() {

      var container = document.getElementById('map-div');

      var map = new google.maps.Map(container, {
        zoom: 3,
        mapTypeControl: false,
        center: new google.maps.LatLng(10, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: styles
      });

      // if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer
      new ThreejsLayer({
        map: map
      }, function (layer) {

        if (layer.renderertype == 'Canvas' || !Detector.webgl) {
          texture = new THREE.Texture(generateSprite());
          particles = new THREE.Object3D();
          material = new THREE.SpriteMaterial({
            size: 20,
            map: texture,
            opacity: 1,
            blending: THREE.NormalBlending,
            depthTest: false,
            transparent: true
          });


          photos.forEach(function (photo) {
            var particle = new THREE.Sprite(material);
            var location = new google.maps.LatLng(photo[0], photo[1]),
              vertex = layer.fromLatLngToVertex(location);

            particle.position.set(vertex.x, vertex.y, 0);
            particle.scale.x = particle.scale.y = 20;
            particles.add(particle);
            material.size = 20;
          });
        } else {
          var geometry = new THREE.Geometry(),
            texture = new THREE.Texture(generateSprite()),
            material, particles;

          photos.forEach(function (photo) {
            var location = new google.maps.LatLng(photo[0], photo[1]),
              vertex = layer.fromLatLngToVertex(location);

            geometry.vertices.push(vertex);
          });

          texture.needsUpdate = true;

          material = new THREE.PointCloudMaterial({
            size: 20,
            map: texture,
            opacity: 0.3,
            blending: THREE.AdditiveBlending,
            depthTest: false,
            transparent: true
          });

          particles = new THREE.PointCloud(geometry, material);
        }
        layer.add(particles);

        gui = new dat.GUI();

        function update() {
          if (layer.renderertype == 'Canvas' || !Detector.webgl) material.map = new THREE.Texture(generateSprite(
            material.size));
          layer.render();
        }

        gui.add(material, 'size', 2, 100).onChange(update);
        gui.add(material, 'opacity', 0.1, 1).onChange(update);

      });
    }

    function generateSprite(size) {

      var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        gradient;
      size = size || 20;
      canvas.width = size;
      canvas.height = size;

      gradient = context.createRadialGradient(
        canvas.width / 2, canvas.height / 2, 0,
        canvas.width / 2, canvas.height / 2, canvas.width / 2
      );

      gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
      gradient.addColorStop(0.0, 'rgba(255,255,255,1)');

      context.fillStyle = gradient;
      context.fillRect(0, 0, canvas.width, canvas.height);

      return canvas;
    }

    document.addEventListener('DOMContentLoaded', init, false);
  </script>

</head>

<body>
  <div id="map-div"></div>
</body>

</html>